<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>接口文档</title>
    <?php self::_loadStatic('jquery.js')?>
    <?php self::_loadStatic('pure.css')?>
    <?php self::_loadStatic('V1.css')?>
</head>

<body>
    <!-- 交互文档区 -->
    <div id="layout">
        <div id="menu">
            <div class="pure-menu pure-menu-open">
                <a class="pure-menu-heading" href="#">接口文档 V1.0.0</a>
                <!-- 填充接口 -->
                <ul id="mlist"></ul>
            </div>
        </div>
        <div id="main">
            <div class="pure-form">
                <select id="api_base">
                    <?php foreach($hosts as $lable=>$host):?>
                    <option value="<?php echo $host.$urlBase?>"><?php echo $lable;?></option>
                    <?php endforeach;?>
                </select>
                <input id="api_token" name="ctoken" value="" placeholder="客户端会话标识" />
            </div>
            <!-- 填充接口 -->
            <ul id="codes">
            </ul>
        </div>
        <!-- 输出预览 -->
        <div class="outputbox">
            <pre id="output">response</pre>
        </div>
    </div>

    <!-- 打印文档区 -->
    <div id="print"> </div>

    <script>
        // 修正布局样式
        var height = $('#menu').height();
        var css = { 'height': height, 'overflow': 'auto' };
        $('#main').css(css);
        $('#output').parent().css(css);
        $('#output').css('min-height', height - 20);
    </script>

    <?php self::_loadStatic('V1.js')?>

    <script>
        // 接口配置
        var config = <?php echo json_encode($apiItem);?>;
        formBuilder(config);
    </script>
</body>

</html>